// This file should only contains CSS style rules critical to
// render the first screen and blank.html (i.e. the shaking cloud animation.)

html {
  height: 100%;
  overflow-x: hidden;
}

body {
  font: 14px sans-serif;
  line-height: 16px;
  border: none;
  padding: 0;
  margin: 0;
  color: #333;
  min-height: 100%;

  overflow-x: hidden;

  background: tint(#b4bcbf, 50%);
  background: linear-gradient(#b4bcbf, white) no-repeat;
  background: -webkit-linear-gradient(#b4bcbf, white) no-repeat;
}

body:lang(zh-tw) {
  &, label, input, textarea, select, button,
  .btn {
    font-size: 15px;
  }
}

*[hidden] {
  display: none;
}

/*
Based on <i> cloud, design by daneden

http://dabblet.com/gist/2945570
https://gist.github.com/2945570
*/

@keyframes shake {
  0%, 50% { transform: translateX(0); }
  5%, 15%, 25%, 35%, 45% { transform: translateX(-10px); }
  10%, 20%, 30%, 40% { transform: translateX(10px); }
}

@-webkit-keyframes shake {
  0%, 50% { -webkit-transform: translateX(0); }
  5%, 15%, 25%, 35%, 45% { -webkit-transform: translateX(-10px); }
  10%, 20%, 30%, 40% { -webkit-transform: translateX(10px); }
}

$icon-width: 100px;
$icon-height: $icon-width * .3333;
$hoz-shift: $icon-width * 0.13;
$shadow-length: $icon-width * 0.05;
.wc-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  margin: (- $icon-height / 2) 0 0 (- $icon-width / 2 + $hoz-shift / 2);
  display: block;
  width: $icon-width;
  height: $icon-height;

  font: $icon-width Times, serif;
  font-weight: bold;
  line-height: 1em;
  text-shadow: 0 $shadow-length $shadow-length rgba(0, 0, 0, 0.1);
  color: #000;

  &::before, &::after {
    content: 'W';
    position: absolute;
    display: block;
    top: - $icon-height * .4666;
    overflow: hidden;
  }
  $word-before-part: 0.38;
  &::before {
    left: - $hoz-shift;
    width: $icon-width * $word-before-part;
  }
  &::after {
    right: $hoz-shift;
    width: $icon-width * (1 - $word-before-part);
    text-indent:
      - $icon-width * $word-before-part;
    z-index: 3;
  }
}
.wc-icon-cloud {
  position: absolute;
  display: block;
  background-color: #fff;
  width: $icon-width;
  height: $icon-height;
  border-radius: $icon-height;
  box-shadow:
    inset 0 (- $shadow-length / 2) rgba(255, 255, 255, 0.6),
    0 $shadow-length $shadow-length rgba(0, 0, 0, 0.1),
    inset 0 (- $shadow-length) $shadow-length rgba(0, 100, 160, 0.1);

  #wc-loading:not(.error):not([hidden]) > .wc-icon > & {
    animation: shake 2s infinite;
    -webkit-animation: shake 2s infinite;
  }

  z-index: 2;

  &:before, &:after {
    content: '';
    position: absolute;
    background-color: #fff;
    border-radius: 100%;
    box-shadow:
      0 (- $shadow-length) $shadow-length rgba(0, 0, 0, 0.05);
  }
  &:before {
    width: $icon-width * .3111;
    height: $icon-width * .3111;
    top: - $icon-height * .4;
    left: $icon-width * .15555;
  }
  &:after {
    width: $icon-width * .5111;
    height: $icon-width * .5111;
    top: - $icon-height * .7333;
    right: $icon-width * .1333;
  }
}

#popup-image {
  width: 100%;
  height: auto;
}
